<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="index">
<div th:fragment="player">
    <header class="app-header">
        <div class="inner">
            <div class="nav-logo">
                <div class="img">

                </div>

            </div>
            <div class="feedback">
                <div class="down-app">
                    <a href="">下载豆瓣FM APP</a>
                </div>
                <span>&nbsp;.&nbsp;</span>
                <div>
                    <a href="#">我要反馈</a>
                </div>
            </div>
            <div class="login-register">
                <a href="/app/sign">登录</a>
                <span style="color: rgb(216, 216, 216); margin: 5px;">|</span>
                <a href="/app/sign">注册</a>
            </div>
            <div class="player-wrapper">
                <div id="bg" class="bg">
                    <div class="left">
                        <div class="jBvxsI"><img width="90" height="90"
                                                 src="https://img3.doubanio.com/f/fm/1e89298732fbf090aea0812f7fb2af30ad82ab61/pics/fm/landingpage/qr_2@2x.png"
                                                 alt="FM APP">
                            <div>
                                <div class="eYjegs">下载豆瓣FM APP</div>
                                <div class="eYjegs">让好音乐继续</div>
                            </div>
                        </div>
                    </div>
                    <div class="middle"
                         style="width: 430px; top: 50%; margin-top: 30px; position: absolute; left: 50%; margin-left: -215px; transform: translate3d(0px, 0px, 0px);">
                        <div style="position: absolute; bottom: 156px; height: 0px; line-height: 0px;">
                            <div>
                                <div class=""
                                     style="position: absolute; width: 12px; height: 12px; display: inline-block; overflow: hidden; left: -22px; bottom: 4px;">
                                    <div class="_2MUigC9rTs5TkYEURNVt2q"
                                         style="position: absolute; background: rgb(92, 188, 125); height: 12px; left: 1px; width: 2px; border-radius: 25%;">
                                    </div>
                                    <div class="JvceXUqvhLlL6h0qs-nzk"
                                         style="position: absolute; background: rgb(92, 188, 125); height: 12px; left: 4px; width: 2px; border-radius: 25%;">
                                    </div>
                                    <div class="_3DmB-mG2d4JJdAo4ugPaTU"
                                         style="position: absolute; background: rgb(92, 188, 125); height: 12px; left: 7px; width: 2px; border-radius: 25%;">
                                    </div>
                                    <div class="_3GgHqQVPiHBR5MylzyjNls"
                                         style="position: absolute; background: rgb(92, 188, 125); height: 12px; left: 10px; width: 2px; border-radius: 25%;">
                                    </div>
                                </div>
                                <div
                                        style="font-size: 16px; font-weight: 400; height: 22px; line-height: 22px; color: rgb(47, 152, 66); bottom: 0px; left: 0px; position: absolute; width: 430px; opacity: 1;">
                                    <!-- react-text: 469 -->豆瓣精选 MHz
                                    <!-- /react-text -->
                                    <svg title="Title" viewBox="134 78 9 16" height="16" width="16"
                                         class="icon" style="vertical-align: middle; top: -2px; margin-left: 14px;">
                                        <desc>Icon</desc>
                                        <path
                                                d="M140.895865,89.8459828 C140.690998,90.0513391 140.358992,90.0513391 140.15362,89.8459828 C139.948793,89.640129 139.948793,89.3071763 140.15362,89.1013146 L143.246666,86.000004 L140.15362,82.8981639 C139.948793,82.6927996 139.948793,82.3593654 140.15362,82.1539931 C140.358992,81.948669 140.690998,81.948669 140.895865,82.1539931 L144.360483,85.6274131 C144.56535,85.8332669 144.56535,86.1662116 144.360483,86.3720814 L140.895865,89.8459828 Z M136.618268,89.8459828 C136.823135,90.0513391 137.155141,90.0513391 137.360513,89.8459828 C137.56534,89.640129 137.56534,89.3071763 137.360513,89.1013146 L134.267467,86.000004 L137.360513,82.8981639 C137.56534,82.6927996 137.56534,82.3593654 137.360513,82.1539931 C137.155141,81.948669 136.823135,81.948669 136.618268,82.1539931 L133.15365,85.6274131 C132.948783,85.8332669 132.948783,86.1662116 133.15365,86.3720814 L136.618268,89.8459828 Z"
                                                stroke="none" fill="#6BBD7A" fill-rule="evenodd"
                                                transform="translate(138.757066, 86.000000) rotate(90.000000) translate(-138.757066, -86.000000) ">
                                        </path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div
                                style="position: absolute; bottom: 64px; height: 32px; line-height: 1.28; font-size: 25px; font-weight: 400; color: rgb(3, 3, 3); white-space: nowrap; text-overflow: ellipsis; max-width: 100%; overflow: hidden; z-index: 1000;">
                            <a class="link _3bHLm1OOWrgMRrfiRpBpRz" title="my apologies"
                               style="font-size: 25px; font-weight: 400; color: rgb(3, 3, 3);" th:text="${song.getContent().get(0).getName()}"></a></div>
                        <div
                                style="position: absolute; bottom: 38px; height: 18px; line-height: 1.2; font-size: 15px; font-weight: 400; color: rgb(74, 74, 74); opacity: 1;">
                            <span><a class="link artist-name" title="isbells"
                                     style="font-size: 15px; font-weight: 400; line-height: 1.2; color: rgb(74, 74, 74);" th:text="${singers[0].getName()}"></a></span>
                        </div>
                        <div th:replace="share::share"></div>
                        <div
                                style="position: absolute; bottom: 10px; height: 13px; line-height: 13px; font-size: 11px; font-weight: 400; color: rgb(155, 155, 155); width: 100%;">
                            <div class="volume-and-time"
                                 style="transform: translate3d(0px, 0px, 0px); display: inline-block; color: rgb(155, 155, 155);">
                                <span id="time" class="time"
                                      style="color: rgb(155, 155, 155); font-weight: 400; margin-right: 10px; display: inline-block; width: 40px;">-01:11</span><span
                                    class="volume-slider" style="height: 15px; position: relative; top: 3px;"><svg
                                    viewBox="0,0,18,18" height="11" width="15" class="volume-icon"
                                    style="vertical-align: middle;">
                                        <desc></desc>
                                        <g id="outbox" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <g id="inbox" transform="translate(0.000000, 0.000000) scale(1.4)"
                                               fill="#919191">
                                                <path
                                                        d="M4.39035714,1.10464215 L1.5,4 L0.5,4 C0.302857143,4 0,4 0,4.5 L0,7.5 C0,8 0.302857143,8 0.5,8 L1.5,8 L4.39035714,10.8952903 C4.4925,10.9974324 4.64607143,11.0281465 4.77964286,10.9727897 C4.91321429,10.917433 5,10.7874338 5,10.642792 L5,1.35714044 C5,1.2128557 4.91285714,1.08249944 4.77964286,1.02714267 C4.73535714,1.00892851 4.68892857,1 4.64285714,1 C4.55,1 4.45857143,1.03642833 4.39035714,1.10464215 Z"
                                                        id="Shape"
                                                        transform="translate(2.500000, 6.000000) scale(1, -1) translate(-2.500000, -6.000000) ">
                                                </path>
                                                <path
                                                        d="M7.12915286,8.59484045 C7.22027735,8.70345348 7.35098117,8.7596009 7.48306566,8.7596009 C7.58707645,8.7596009 7.69154746,8.72462382 7.77806971,8.65282876 C8.50154297,8.04809348 9,6.99999993 9,5.99733213 C9,4.99466434 8.49141802,3.9226391 7.75091645,3.31882427 C7.55394027,3.15774562 7.2639987,3.1890409 7.10338027,3.38509663 C6.94276184,3.58207281 6.97267645,3.87201438 7.16965263,4.03263281 C7.69799061,4.46340315 7.98629522,4.99558479 8,5.99779236 C8.01370478,6.99999993 7.70397353,7.51469303 7.18714117,7.94638382 C6.99200589,8.10930337 6.96669353,8.39970517 7.12915286,8.59484045 Z">
                                                </path>
                                                <path
                                                        d="M10.2816139,10.0758436 C11.3056139,9.07623551 12,8.00000011 12,5.99779236 C12,3.99558461 11.3056139,2.91888899 10.2816139,1.9192809 C10.0998252,1.74209438 9.80896314,1.74531596 9.63085617,1.92756494 C9.45320943,2.10981393 9.45689123,2.40067596 9.63914022,2.5783227 C10.4864139,3.40534652 10.9724113,4.49650506 11,5.99825258 C11.0275887,7.50000011 10.4859537,8.59069843 9.63914022,9.41772225 C9.45689123,9.59536899 9.45366966,9.88669124 9.63085617,10.06848 C9.72106022,10.1605249 9.84071864,10.2065474 9.96037707,10.2065474 C10.0763537,10.2065474 10.1923303,10.1628261 10.2816139,10.0758436 Z">
                                                </path>
                                                <path
                                                        d="M12.7930946,11.483671 C14.1056555,10.1089798 14.999885,8.7399225 15,5.99687191 C15.000115,3.25382132 14.1051953,1.88522427 12.7935548,0.510533034 C12.6182092,0.326903371 12.3259665,0.32 12.1427971,0.495345618 C11.9591674,0.671151461 11.9522641,0.962473708 12.1276097,1.14610337 C13.2781715,2.35143191 14.0001151,3.57113359 14,5.99687191 C13.9998849,8.42261023 13.2781715,9.64277213 12.1271494,10.8481007 C11.9518038,11.0317303 11.9587072,11.3230526 12.1423369,11.4988584 C12.2311602,11.5844602 12.3457562,11.6263407 12.4598919,11.6263407 C12.5813912,11.6263407 12.7019701,11.5784773 12.7930946,11.483671 Z">
                                                </path>
                                            </g>
                                        </g>
                                    </svg>
                                    <div class="slider ui-slider hide"
                                         style="width: 55px; height: 15px; margin-right: -55px;">
                                        <div class="bar-container"
                                             style="display: block; width: 50px; height: 2px; background-color: rgb(229, 229, 232); margin-top: 6.5px;">
                                            <div class="bar"
                                                 style="background-color: rgb(151, 151, 151); height: 2px; width: 0px;">
                                            </div>
                                        </div>
                                        <div class="handle react-draggable"
                                             style="touch-action: none; top: 2.5px; height: 10px; width: 5px; transform: translate(0px, 0px);">
                                        </div>
                                    </div>
                                </span></div>
                            <div class="sub-buttons-wrapper" style="float: right; opacity: 1;">
                                <div class="sub-buttons"><label title="显示歌词">
                                    <svg title="Title" viewBox="0 0 20 20"
                                         height="20" width="20" class="icon" style="vertical-align: middle;">
                                        <desc>Icon</desc>
                                        <g id="icon" fill="none" fill-rule="evenodd">
                                            <g id="ci" fill="#B9B9B9">
                                                <path
                                                        d="M2 7.5c0-.276.229-.5.5-.5h11c.276 0 .5.232.5.5 0 .276-.229.5-.5.5h-11a.505.505 0 0 1-.5-.5zm1 3c0-.276.215-.5.498-.5h4.004c.275 0 .498.232.498.5 0 .276-.215.5-.498.5H3.498A.504.504 0 0 1 3 10.5zm0 3c0-.276.215-.5.498-.5h4.004c.275 0 .498.232.498.5 0 .276-.215.5-.498.5H3.498A.504.504 0 0 1 3 13.5zm-1 3c0-.276.233-.5.503-.5h5.994c.278 0 .503.232.503.5 0 .276-.233.5-.503.5H2.503A.507.507 0 0 1 2 16.5zm1-12c0-.276.215-.5.498-.5h4.004c.275 0 .498.232.498.5 0 .276-.215.5-.498.5H3.498A.504.504 0 0 1 3 4.5zM9.5 4c-.303 0-.5.255-.5.5s.197.5.5.5H16v11l-3.5.044c-.328 0-.5.15-.5.456 0 .308.172.5.5.5H16c.497 0 1-.5 1-1V5c0-.5-.505-1-1-1H9.5zm4.5 6.604a.601.601 0 0 0-.596-.604H9.597a.602.602 0 0 0-.597.604v2.791c0 .333.269.605.597.605h3.807a.602.602 0 0 0 .596-.605v-2.79zM10 11h3v2h-3v-2z"
                                                        id="Combined-Shape"></path>
                                            </g>
                                        </g>
                                    </svg>
                                </label><span style="width: 25px; display: inline-block;"></span><label
                                        title="离线歌曲到手机">
                                    <svg title="Title" viewBox="0 0 20 20" height="20" width="20"
                                         class="icon" style="vertical-align: middle;">
                                        <desc>Icon</desc>
                                        <g id="icon" fill="none" fill-rule="evenodd">
                                            <g id="download" fill="#B9B9B9">
                                                <g id="Group-16">
                                                    <path
                                                            d="M12 14H1.845C1.378 14 1 14.447 1 15c0 .553.378 1 .845 1H12v-2z"
                                                            id="Combined-Shape"></path>
                                                    <path
                                                            d="M18.405 7h-4.812c-.32 0-.593.258-.593.56v8.88c0 .302.274.56.593.56h4.812c.32 0 .593-.258.593-.56V7.56c0-.302-.274-.56-.593-.56zm-.806 8.5h-3.09c-.291 0-.51-.26-.51-.561v-5.43c0-.303.219-.562.473-.509h3.054c.254-.053.472.206.472.508v5.43c0 .303-.145.562-.4.562z"
                                                            id="Shape" transform="matrix(1 0 0 -1 0 24)"></path>
                                                    <path
                                                            d="M7 10.9v-8c0-.497.449-.9 1-.9.552 0 1 .403 1 .9v8c0 .498-.448.901-1 .901-.551 0-1-.403-1-.901z"
                                                            id="Fill-36"></path>
                                                    <path
                                                            d="M12 8.298l-4 2.805L2.375 7.16a.88.88 0 0 0-1.213.197.84.84 0 0 0 .2 1.186l6.131 4.298a.884.884 0 0 0 1.013 0L12 10.39V8.299z"
                                                            id="Combined-Shape"></path>
                                                </g>
                                            </g>
                                        </g>
                                    </svg>
                                </label><span style="width: 25px; display: inline-block;"></span><label
                                        title="分享这首歌">
                                    <svg title="Title" id="share-icon" viewBox="0 0 20 20" height="20" width="20"
                                         class="icon" style="vertical-align: middle;">
                                        <desc>Icon</desc>
                                        <g id="icon" fill="none" fill-rule="evenodd">
                                            <g id="share" fill="#B9B9B9">
                                                <path
                                                        d="M12.69 13.145L7.94 10.31A2.06 2.06 0 0 0 8 9.83a2.06 2.06 0 0 0-.06-.478l4.7-2.81a1.96 1.96 0 0 0 1.36.553c1.103 0 2-.918 2-2.048S15.103 3 14 3s-2 .918-2 2.048c0 .164.023.324.06.478l-4.7 2.81A1.96 1.96 0 0 0 6 7.783c-1.103 0-2 .918-2 2.048s.897 2.048 2 2.048a1.96 1.96 0 0 0 1.36-.553l4.75 2.837a1.977 1.977 0 0 0-.053.447c0 1.099.87 1.99 1.943 1.99s1.943-.891 1.943-1.99c0-1.1-.87-1.99-1.943-1.99a1.91 1.91 0 0 0-1.31.525z"
                                                        id="Shape-3"></path>
                                            </g>
                                        </g>
                                    </svg>
                                </label></div>
                            </div>
                        </div>
                       <video th:src="@{|${song.getContent().get(0).getUrl()}|}" controls autoplay  id="vdo" hidden></video>
                        <div class="_3dc88PzjGniYgbqLSjQQcb playing-progress"
                             style="position: absolute; top: 0px; left: 0px;">
                            <div
                                    style="display: block; overflow: hidden; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;">
                                <div class="_3Fodp_RS9L8nzSifJReKlV"
                                     style="width: 0%; background-color: rgb(196, 196, 196);"></div>
                                <div class="_3Fodp_RS9L8nzSifJReKlV"
                                     style="width: 100%; left: -26%; background-color: rgb(107, 189, 122);"></div>
                            </div>
                        </div>
                        <div
                                style="position: absolute; top: 59px; height: 16px; line-height: 1; width: 430px; x: 0px; y: 0px; transform: translate3d(0px, 0px, 0px) scale(1);">
                            <div class="buttons"><label title="加红心">
                                <svg viewBox="0,0,30,30" height="26" width="26"
                                     class="icon icon-heart" style="vertical-align: middle;">
                                    <desc></desc>
                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <path
                                                d="M22,0 C18.9359565,0 16.5821582,1.72596986 15,3.5 C13.4530656,1.72596986 11.0993172,0 8,0 C3.7559698,0 0,3.9236383 0,9 C0,12.0105248 0.844640658,15.0729547 2.5,18 C6.88109125,25.6681877 15.0243286,28.9632358 15,29 C15.0243286,28.9631844 22.9314319,25.7540044 27.5,18 C29.1765036,15.1251042 30.0352238,12.2324468 30,9 C30.0352238,3.9236383 26.2791541,0 22,0 Z"
                                                id="b" fill="#4A4A4A"></path>
                                    </g>
                                </svg>
                            </label><span style="width: 32px; display: inline-block;"></span><label
                                    title="不再播放">
                                <svg title="Title" viewBox="0,0,30,30" height="26" width="26"
                                     class="icon" style="vertical-align: middle;">
                                    <desc>Icon</desc>
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <path
                                                d="M19.0000002,2.99518936 L25.5501576,2.99518936 C27.2676993,2.99518936 27.9974555,4.25794694 27.9974555,5.16641446 L27.9974556,7.00000017 L2,7.00000017 L2,5.07556186 C2,4.18983672 2.59870784,2.99518936 4.31630844,2.99518936 L11,2.99518936 L11,1.5 C11,0.5 11.5,0 12.5,0 L17.5,0 C18.5,0 18.9999997,0.5 19,1.5 L19.0000002,2.99518936 Z M4.23383579,27.9351249 C4.2446828,28.8186284 4.84627924,29.9939828 6.54778618,30 L23.4857474,30 C25.1313687,29.9939828 25.8684938,28.8317828 25.9256175,27.9351249 L27.4668952,8 L2.53056032,8 L4.23383579,27.9351249 Z M11,25 C10,25 10,24.5 10,24 L10,13 C10,12.5 10,12 11,12 C12,12 12,12.5 12,13 L12,24 C12,24.5 12,25 11,25 Z M19,25 C18,25 18,24.5 18,24 L18,13 C18,12.5 18,12 19,12 C20,12 20,12.5 20,13 L20,24 C20,24.5 20,25 19,25 Z"
                                                fill="#4A4A4A"></path>
                                    </g>
                                </svg>
                            </label>
                                <div style="position: absolute; right: 0px; top: 2px;"><label title="暂停">
                                    <svg id="play-icon"
                                            title="Title" viewBox="61 0 22 22" height="22" width="22"
                                            class="icon icon-pause" style="vertical-align: middle;">
                                        <desc>Icon</desc>
                                        <path
                                                d="M61,1.00246167 C61,0.448817378 61.4509752,0 61.990778,0 L66.009222,0 C66.5564136,0 67,0.43945834 67,1.00246167 L67,20.9975383 C67,21.5511826 66.5490248,22 66.009222,22 L61.990778,22 C61.4435864,22 61,21.5605417 61,20.9975383 L61,1.00246167 Z M77,1.00246167 C77,0.448817378 77.4509752,0 77.990778,0 L82.009222,0 C82.5564136,0 83,0.43945834 83,1.00246167 L83,20.9975383 C83,21.5511826 82.5490248,22 82.009222,22 L77.990778,22 C77.4435864,22 77,21.5605417 77,20.9975383 L77,1.00246167 Z"
                                                stroke="none" fill="#4a4a4a" fill-rule="evenodd"></path>
                                    </svg>
                                </label><span style="width: 60px; display: inline-block;"></span><label
                                        title="下一首">
                                    <svg title="Title" viewBox="0,0,30,30" height="22" width="22"
                                         class="icon" style="vertical-align: middle;">
                                        <desc>Icon</desc>
                                        <g id="Page-1" fill="none" fill-rule="evenodd">
                                            <g id="Fill-1-Copy-8-+-Path-Copy-6-+-Oval-3-Copy-2" fill="#4A4A4A">
                                                <path
                                                        d="M4.722 1.347l18.973 12.148c1.497.828 1.497 2.182 0 3.01L4.722 28.653C3.225 29.48 2 28.778 2 27.09V2.91C2 1.22 3.225.52 4.722 1.346zM25 28.5c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"
                                                        id="Fill-1-Copy-8"></path>
                                                <path id="Path-Copy-6" d="M23 4h4v22.5h-4z"></path>
                                                <path
                                                        d="M25 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"
                                                        id="Oval-3-Copy-2"></path>
                                            </g>
                                        </g>
                                    </svg>
                                </label></div>
                            </div>
                        </div><!-- react-empty: 92 -->
                    </div>
                    <div class="right">
                        <div class="playing-cover" style=""><img alt="" width="0" height="0"
                                                                 th:src="@{${song.getContent().get(0).getCover()}}">
                            <div class="cover" th:style="'background-image:url('+${song.getContent().get(0).getCover()}+');'">
                            </div>
                            <span class="hover-tip">查看专辑信息</span>
                        </div>
                    </div>
                </div>
                <div class="tips">
                    <div>
                        <a href="">登陆</a>
                        /
                        <a href="">注册</a>
                        后豆瓣FM将永久保留你的收听历史与喜好
                    </div>
                </div>
            </div>
        </div>

</header>
    <script type="text/javascript" th:inline="javascript">
        var bg = document.getElementById("bg");
        var share = document.getElementById("share");
        //分享show
        $(document).ready(function () {
            $("#share-icon").click(function (){
                $("#share").show();
            });
            //X隐藏
            $("#close").click(function () {
                $("#share").hide();
            });
        });
        //点击分享模态框外部隐藏
        window.onclick=(function (event) {
            if (event.target===bg) {
                share.style.display = "none";
            }

        });
        //获取video元素
        var myVideo = document.getElementById('vdo');
        var playicon = document.getElementById("play-icon");
        var time = document.getElementById("time");
        var tol = 0;
        console.log(myVideo);

        myVideo.addEventListener("loadedmetadata", function(){
            //要执行的代码
            tol = myVideo.duration;//获取总时长
            var currentTime = myVideo.currentTime;//获取当前播放时间
            var volume = myVideo.volume;//获取当前音量

            console.log(currentTime);
        });

        //播放
        function play(){
            myVideo.play();
        }
        playicon.addEventListener("click",pause);
        //设置音量
        function setVol(num){
            myVideo.volume = num;
        }
        myVideo.addEventListener("timeupdate", function(){
            var currentTime = myVideo.currentTime;//获取当前播放时间
            var second = parseInt(currentTime%60);
            var min = parseInt(currentTime/60);

            time.innerText = min+":"+second+"s";
        });
        //暂停
        function pause(){
            myVideo.pause();
        }

    </script>
</div>

</html>